<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="app">
		{{totalPrice}}
	</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app = new Vue({
		el:"#app",
		data:{
			books:[
				{id:1,name:'Vue实战',date:'2020-9-17',price:12.00,count:1},
				{id:2,name:'php实践',date:'2020-9-12',price:42.00,count:1},
				{id:3,name:'mysql优化',date:'2020-9-11',price:22.00,count:1},
				{id:4,name:'js编程艺术',date:'2020-9-13',price:13.00,count:1},
			]
		},
		computed:{
			totalPrice(){
			// for循环3中饭方式
			// 1.普通for循环
				// let totalPrice = 0;
				// for(let i = 0;i < this.books.length;i++){
				// 	totalPrice += this.books[i].price*this.books[i].count;
				// }
				// return totalPrice;
			// 2. for of循环es6 也可以用for in不过这样只是去索引
				// let sum = 0;
				// for(let item of this.books){
				// 	sum += item.price*item.count;
				// }
				// return sum;
				// }
			// 3.reduce
			// 编程范式: 命令式编程/声明式编程
			// 编程范式: 面向对象编程/函数式编程
						// 区分方式 第一公民:对象/函数  
			//高阶函数是为了避免频繁的使用for循环 
				return this.books.reduce(function(prev,book){
					return prev + book.price*book.count;
				},0)
			}
		}
	})
</script>
</html>